// 提供一个能显示shop-message组件的函数
// 目标：shop-message能导入直接使用，也能挂载在vue实例原型上
// 1.import Message from 'Message.js', 使用Message({type: 'error', text:'提示文字'})
// 2.this.$message({type: 'error', text:'提示文字'})
import { createVNode, render } from 'vue'
import ShopMessage from './shop-message.vue'

// 在函数外面创建容器，可以避免函数被调用时多次创建容器
const div = document.createElement('div')
div.setAttribute('class', 'shop-message-container')
document.body.appendChild(div)
// 定义一个定时器
let timer = null

export default ({ type, text }) => {
  // 1.导入消息提示组件
  // 2.将消息提示组件编译为虚拟节点
  // createVNode(组件, 参数对象(props))
  const vnode = createVNode(ShopMessage, { type, text })
  // 3.准备一个装载消息提示组件的容器
  // 4.将虚拟节点渲染在容器中
  // 调用render渲染虚拟节点
  // render(虚拟节点, 容器)
  render(vnode, div)
  clearTimeout(timer)
  timer = setTimeout(() => {
    render(null, div)
  }, 2000);
}
